import React from "react";
import ClickCounter from "./ClickCounter";
import HoverCounter from "./HoverCounter";
import Counter from "./Counter";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        {/* 单个组件实现 */}
        <ClickCounter/>
        <HoverCounter/>
        <hr/>
        {/* render-props 实现 */}
        {/* <Counter
          render={
            (count, handleCount) => {
              return (
                <button onClick={handleCount}>按钮被点击了{count}次</button>
              )
            }
          }
        />
        <Counter
          render={
            (count, handleCount) => {
              return (
                <div>
                  <h1 onMouseEnter={handleCount}>鼠标滑过了标题{count}次</h1>
                  <h2>这是render-props</h2>
                </div>
              )
            }
          }
        /> */}
        {/* render-props children 实现 */}
        {/* <Counter>
          {
            (count, handleCount) => {
              return (
                <button onClick={handleCount}>按钮被点击了{count}次</button>
              )
            }
          }
        </Counter> */}
        {/* <Counter>
          {
            (count, handleCount) => {
              return (
                <div>
                  <h1 onMouseEnter={handleCount}>鼠标滑过了标题{count}次</h1>
                  <h2>这是render-props使用children属性传递</h2>
                </div>
              )
            }
          }
        </Counter> */}
      </div>
    );
  }
}

export default App;
